<template lang="html">
  <div class="foot-nav">
    <ul>
    	<router-link tag="li" to="/index">
    		<span>首页</span>
    	</router-link>
    	<router-link tag="li" to="/strategy">
    		<span>攻略</span>
    	</router-link>
    	<router-link tag="li" to="/find">
    		<span>发现</span>
    	</router-link>
    	<router-link tag="li" to="/deer">
    		<span>鹿友</span>
    	</router-link>
    	<router-link tag="li" to="/mine">
    		<span>我的</span>
    	</router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name:"FootNav",
  data(){
    return{

    }
  }
}
</script>

<style lang="css" scoped>
.foot-nav {
  width: 100%;
  padding: 12px 0;
  background-color: #fff;
  z-index: 999;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
.active {
  color: #7dd19c;
}
.foot-nav ul {
  display: flex;
}
.foot-nav ul li {
  flex: 1;
  text-align: center;
}
.foot-nav ul li:nth-child(1) {
  background: url(../../src/assets/icon/Homepage_01.png) no-repeat top center;
  background-size: 0.4rem;
}
.foot-nav ul li:nth-child(1).active {
  background: url(../../src/assets/icon/Homepage_02.png) no-repeat top center;
  background-size: 0.4rem;
}
.foot-nav ul li:nth-child(2) {
  background: url(../../src/assets/icon/strategy_01.png) no-repeat top center;
  background-size: 0.4rem;
}
.foot-nav ul li:nth-child(2).active {
  background: url(../../src/assets/icon/strategy_02.png) no-repeat top center;
  background-size: 0.4rem;
}
.foot-nav ul li:nth-child(3) {
  background: url(../../src/assets/icon/Findout_01.png) no-repeat top center;
  background-size: 0.4rem;
}
.foot-nav ul li:nth-child(3).active {
  background: url(../../src/assets/icon/Findout_02.png) no-repeat top center;
  background-size: 0.4rem;
}
.foot-nav ul li:nth-child(4) {
  background: url(../../src/assets/icon/deer_01.png) no-repeat top center;
  background-size: 0.4rem;
}
.foot-nav ul li:nth-child(4).active {
  background: url(../../src/assets/icon/deer_02.png) no-repeat top center;
  background-size: 0.4rem;
}
.foot-nav ul li:nth-child(5) {
  background: url(../../src/assets/icon/mine_01.png) no-repeat top center;
  background-size: 0.4rem;
}
.foot-nav ul li:nth-child(5).active {
  background: url(../../src/assets/icon/mine_02.png) no-repeat top center;
  background-size: 0.4rem;
}
.foot-nav ul li span {
  display: block;
  font-size: 0.18rem;
  line-height: 0.41rem;
  padding: 0.4rem 0 0 0;
}
</style>
